<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>700 到 1000px - 添加文本前缀信息</title>
    <style>
        /* 当浏览器的宽度在 700 到 1000px, 会在邮箱链接前添加 "Email: ": */
        ul {
            list-style-type: none;
        }

        ul li a {
            color: green;
            text-decoration: none;
            padding: 3px;
            display: block;
        }

        @media screen and (max-width: 699px) and (min-width: 520px) {
            ul li a {
                padding-left: 30px;
                background: url('images/email-icon.png') left center no-repeat;
            }
        }

        @media screen and (max-width: 1000px) and (min-width: 700px) {
            ul li a:before {
                content: "Email: ";
                font-style: italic;
                color: #666666;
            }
        }
    </style>
</head>

<body>

    <h1>重置浏览器窗口，查看效果!</h1>

    <ul>
        <li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li>
        <li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary Moe</a></li>
        <li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda Panda</a></li>
    </ul>

</body>

</html>